<#assign contextPath=springMacroRequestContext.getContextPath() />
<#import "/public/frame/main.html" as frame />
<@frame.head "南航明珠商城-订单销售统计-按城市">
</@frame.head>
<link rel="stylesheet" type="text/css" href="${contextPath}/resources/css/search_table.css" />
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 后台管理中心 <span class="c-gray en">&gt;</span> 数据分析 <span class="c-gray en">&gt;</span> 订单销售统计 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="btn-group">
  <a href="${contextPath}/order_count/get_order_by_prov"><span class="btn btn-default radius">&nbsp;&nbsp;按省份&nbsp;&nbsp;</span></a>
  <a href="#"><span class="btn btn-primary radius">&nbsp;&nbsp;按城市&nbsp;&nbsp;</span></a>
  <a href="${contextPath}/order_count/get_order_by_merchant"><span class="btn btn-default radius">按经销商</span></a>
</div>
<div class="page-container">
   <div class="text-c">
    <form action="${contextPath}/order_count/get_order_by_city" method="post" name="search_form" id="search_form">
        <input type="hidden" name="page" value="${page}"  id="page"  data-groupBy="${groupBy}"/>  
        <table class="table search_table" >
          <tr>   
           <td style="width:16%">
           <span style="width:20%">省份：</span>
           <span class="select-box radius"  style="width:75%">
           <select class="select" id="prov" name="provID" onchange="changeCity()" >
           <option value>请选择</option>
             <#list baseProvList as list>  
                 <option value="${list.provId}" <#if list.provId==orderQo.provID>selected="selected"</#if>>${list.provName}</option>
             </#list>
           </select>
           </span>
           </td>
           <td style="width:16%">
           <span style="width:20%">城市：</span>
           <span class="select-box radius" style="width:75%">
           <select class="select" id="city" name="cityID" >
           <option value>请先选择省份</option>
           <#list cityList as list>  
                 <option value="${list.id}" <#if list.id==orderQo.cityID>selected="selected"</#if>>${list.cityName}</option>
           </#list>
           </select>
           </span>
           </td>  
           <td>销售日期：</td>
           <td><input  type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'endDate\')||\'%y-%M-%d\'}',readOnly: true })" id="startDate" 
               value='${(orderQo.startTime?string("yyyy-MM-dd"))!}' name="startTime"  class="input-text Wdate" style="width:45%;">
                                                至
               <input  type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'startDate\')}',maxDate:'%y-%M-%d',readOnly: true })" id="endDate" 
               value='${(orderQo.endTime?string("yyyy-MM-dd"))!}' name="endTime"    class="input-text Wdate" style="width:45%;">
           </td>
           <td>排序方式：
           <td>
           	<input type="radio" name="orderBy" value="1" <#if orderQo.orderBy!="2">checked="checked"</#if>/>订单量&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="orderBy" value="2" <#if orderQo.orderBy=="2">checked="checked"</#if>/>订单金额
		   </td>
         </tr>
         <tr>
         <td colspan="6" style="text-align:center;" >
           <input class="btn btn-success radius" type="button"  onclick="search();"  value="搜索" />
           <input class="btn btn-success radius" type="button"  onclick="toIsEmpty();" value="重置" />
           <input class="btn btn-success radius" type="button"  onclick="slimport();"   value="导出" />
         </td>
         </tr>
      </table>
     </form>
    </div>

    <div class="cl pd-5 bg-1 bk-gray mt-20"> 
    <span class="l">
    </span>
    <span class="r">共有数据：<strong>${count}</strong> 条</span> </div>
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr  class="text-c">
            <th >排名</th>
            <th >城市</th>
            <th >订单量</th>
            <th >里程销售金额</th>
            <th >操作</th>
        </tr>
        </thead>
        <tbody >
         <#list answerList as list> 
         <tr  class="text-c">
            <td>${(page-1)*10+list_index+1}</td>
            <td>${list.baseProv}</td>
            <td>${list.num}</td>
            <td>${list.licheng} 公里</td>
            <td><a href="javascript:;" onclick="detail('${list.area}');">订单明细</a></td>
         </tr>
         </#list>
        </tbody>
        <tfoot>
          <tr class="text-c">
             <th>合计</th>
             <th></th>
             <th>${orderNum}</th>
             <th>${mileages} 公里</th>
             <th>
             	<#if answerList?? && (answerList?size &gt; 0)>
					<a href="javascript:;" onclick="detail('');">订单明细</a>
				</#if>
             </th>
          </tr>
        </tfoot>
    </table>
    <div id="div_page" style="padding-top: 10px;float: right"></div>
</div>	
<@frame.end "default">
</@frame.end>
</html>
<script type="text/javascript" src="${contextPath}/resources/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/laypage/laypage.js"></script>
<script type="text/javascript">
var path="${contextPath}";
laypage({
    cont: 'div_page',//容器。值支持id名、原生dom对象，jquery对象。
    pages: ${pageSize},//通过后台拿到的总页数
    curr:  ${page} || 1, //当前页
	skip: true, //是否开启跳页
	first: 1, //将首页显示为数字1,。若不显示，设置false即可
	last: ${pageSize}, //将尾页显示为总页数。若不显示，设置false即可
    jump: function(obj , first){//触发分页后的回调
        if(!first){ //点击跳页触发函数;当前页为obj.curr
            $("#page").val(obj.curr);
            $("#search_form").submit();
        }
    }
})  
function detail(id){
	var startTime = $('#startDate').val();
	var endTime = $('#endDate').val();
	var groupBy = $('#page').attr('data-groupBy');
	
	 /*查看*/
	 var index = layer.open({
		  type: 2,
		  title: '商品销售统计-订单明细',
		  scrollbar: false,
		  content: path+'/order_count/order_detail?areaId='+id+'&startTime='+startTime+'&endTime='+endTime+'&groupBy='+groupBy,
		  area: ['800px','600px']
	});
}
function search() {
	var startDate = $('#startDate').val();
	var endDate = $('#endDate').val();
	if ((startDate.length != 0 && startDate != '')
			&& (endDate.length != 0 && endDate != '')) {
		var startTime1 = startDate.slice(0, 4) + startDate.slice(5, 7)
				+ startDate.slice(8, 10);
		var endTime1 = endDate.slice(0, 4) + endDate.slice(5, 7)
				+ endDate.slice(8, 10);
		var timeValue1 = endTime1 - startTime1;
		if (timeValue1 < 0) {
			layer.alert("结束时间必须大于或等于开始时间!");
			return;
		}
	}
    $("#page").val("1");
    $("#search_form").submit();
}


function changeCity(){
	var provId=$("#prov").find("option:selected").attr("value");
	if(provId==null||provId==""){
		$("#city").html("<option value>请选择</option>");
		return;}
	var url=path + "/order_count/query_city";
	var html="";
		     $.ajax({
				url : url,
				type : "post",
				dataType : "json",
				data : {
					"provId":provId
				},
				success : function(msg) {
				   var result=eval(msg);
				   for (var i=0;i<result.length; i++) {
				     for(var p in result[i] ){
				      if(p=="cityName"){
				       cityName=result[i][p];
				      }else{
				       cityId=result[i][p];
				      }
				   }
				      html+="<option value="+cityId+">"+cityName+"</option>";	     
				 }
				 $("#city").html("<option value>请选择</option>"+html);        
		}});
}
function toIsEmpty(){
	$('#startDate').val('');
	$('#endDate').val(''); 
	document.getElementsByName("provID")[0].value='';
	document.getElementsByName("cityID")[0].value='';
    document.getElementsByName("orderBy")[0].checked= true;
}
function slimport(){
	 var startTime=$('#startDate').val();
	 var endTime=$('#endDate').val();
	 var groupBy=$("#page").attr("data-groupBy");
	 var orderBy=$("input[name='orderBy']:checked").val();
	 var areaId=$("#city").val();
	 window.location.href=(path + "/order_count/export?startTime="+startTime+"&endTime="+endTime+"&orderBy="+orderBy+
	              "&groupBy="+groupBy+"&areaId="+areaId); 
}
</script>